<template>
  <view class="_input-wrapper">
    <view class="label">{{ title }}</view>
    <view class="_input-box">
      <view class="option-button minus" @click="handleReduce">
        <image class="_icon" :src="stitchingURL('icons/input-minus')"></image>
      </view>
      <view class="right-part">
        <input 
          class="input"
          type="digit"
          :min="min"
          :max="max"
          :maxlength="maxLength"
          :value="modelValue"
          @input="handleChange"
          @blur="e => $emit('update:modelValue', +e.target.value)"
        />
        <view class="unit">{{ unit }}</view>
        <view class="option-button plus" @click="handleAdd">
          <image class="_icon" :src="stitchingURL('icons/input-plus')"></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { ref } from 'vue';
  import { stitchingURL, throttleFn } from '@/common/util.js';

  // { modelValue, min, max, title, step }
  const props = defineProps({
    modelValue: {
      type: Number,
      default: undefined
    }, 
    title: {
      type: String,
      default: ''
    }, 
    unit: {
      type: String,
      default: ''
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 20000
    },
    maxLength: {
      type: Number,
      default: 5
    },
    step: Number,
    default: 1
  })
  const $emit = defineEmits(['update:modelValue']);
  const value = ref(props.modelValue);

  const verifyVal = (val) => {
    if ((!props.min && (props.min !== 0)) && (!props.max && (props.max !== 0))) {
      return val;
    }
    if (props.min && val < props.min) {
      return props.min;
    }
    if (max && val > props.max) {
      return props.max;
    }
    return val;
  }
  const handleAdd = () => {
    const val = +(value.value ? value.value : 0) + props.step;
    value.value = val > props.max ? props.max : val;
    $emit('update:modelValue', value.value);
  }
  const handleReduce = () => {
    const val = +(value.value ? value.value : 0) - props.step;
    value.value = val < props.min ? props.min : val;
    $emit('update:modelValue', value.value);
  }
  const inputChange = throttleFn(() => {
    $emit('update:modelValue', value.value);
  }, 2500)
  const handleChange = (e) => {
    const val = +e.target.value;  
    value.value = val;
    inputChange();
  }
  // watch(() => value.value, () => {
  //   $emit('update:modelValue', value.value);
  //   // const val = verifyVal(value.value);
  //   // if (val !== value.value) {
  //   //   setTimeout(() => {
  //   //     value.value = val;
  //   //     $emit('update:modelValue', val);
  //   //   },0)
  //   // }
  // });
  // watch(() => modelValue, () => {
  //   if (modelValue !== value.value) {
  //     value.value = modelValue;
  //   }
  // })
</script>
<style lang="scss" scoped>
._input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .label {
    color: #1F1F1F;
    font-size: 28upx;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  ._input-box {
    margin-left: 20upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    border-radius: 23upx;
    background: #F5F5F5;
    .option-button {
      height: 64upx;
      padding: 16upx 20upx;
      display: flex;
      align-items: center;
      box-sizing: content-box;
      display: flex;
      justify-content: center;
      align-items: center;
      // &.minus {
      //   padding: 16upx 20upx;
      // }
      // &.plus {
      //   padding: 16upx 40upx 16upx 0;
      // }
      ._icon {
        width: 42upx;
        height: 42upx;
      }  
    }
    .right-part {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 64upx;
      .input {
        flex: 1;
        height: 50upx;
        font-size: 28upx;
        font-weight: bold;
        text-align: center;
        color: #1F1F1F;
        font-family: D-DIN;
        font-size: 42upx;
        font-style: normal;
        font-weight: 700;
        line-height: 50upx;
      }
      .unit {
        margin-left: 10upx;
        color: #7D7D7D;
        font-family: D-DIN;
        font-size: 38upx;
        font-style: normal;
        font-weight: 500;
        line-height: 50upx;
      }
    }
  }
}
</style>